import React from 'react';
import { Tree, Spin, Empty } from 'antd';
import cn from 'classnames';
import { getOrganizationTreeWithNum } from '@/services/Organization/orgmanage';
import logo from '@/assets/logo.png';
import BizIcon from '@/components/BizIcon';
import styles from './index.less';

const { TreeNode } = Tree;
const DepartmentTree = ({ onSelect }) => {
    const [loading, setLoading] = React.useState(false);
    const [treeData, setTreeData] = React.useState([]);
    const [selectedKeys, setSelectedKeys] = React.useState([]);

    const handleSelect = (_, { node }) => {
        if (_.length > 0) {
            setSelectedKeys(_);
        }
        if (onSelect) {
            onSelect(node?.props?.dataRef);
        }
    };

    const getIcon = item => {
        if (item.organizationType === 1 && item.parentOrganizationPath === '') {
            return <img alt="logo" src={logo} style={{ width: '18px', height: '18px' }} />;
        }
        if (item.organizationType === 2) {
            return <BizIcon type="list_icon_company_default" />;
        }
        return null;
    };

    const renderTreeNodes = data =>
        data.map(item => {
            const keys = `${item.organizationType}-${item.organizationCode}`;
            if (item.children) {
                return (
                    <TreeNode
                        className={cn(styles.treeList, {
                            [styles.clearIcon]: item.organizationType === 3
                        })}
                        icon={getIcon(item)}
                        title={`${item.organizationName}(${item.allEmployeeNum})`}
                        key={keys}
                        value={item.organizationCode}
                        dataRef={item}
                    >
                        {renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return (
                <TreeNode
                    className={cn({
                        [styles.clearIcon]: item.organizationType === 3
                    })}
                    icon={getIcon(item)}
                    title={`${item.organizationName}(${item.allEmployeeNum})`}
                    key={keys}
                    value={item.organizationCode}
                    dataRef={item}
                />
            );
        });

    const renderTree = () => {
        if (treeData && treeData.length > 0) {
            return (
                <Tree
                    // defaultExpandAll
                    showIcon
                    selectedKeys={selectedKeys}
                    defaultExpandedKeys={[`${treeData[0]?.organizationType}-${treeData[0]?.organizationCode}`]}
                    onSelect={handleSelect}
                >
                    {renderTreeNodes(treeData)}
                </Tree>
            );
        }
        return (
            <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </div>
        );
    };

    const fetchCompanyTree = async () => {
        setLoading(true);
        const { code, data } = await getOrganizationTreeWithNum({
            showTreeFlag: 1,
            organizationPermissions: 1
        });
        if (code === 10000) {
            setTreeData(data || []);
            if (data && data.length > 0) {
                setSelectedKeys([`${data[0]?.organizationType}-${data[0]?.organizationCode}`]);
                if (onSelect) {
                    onSelect(data[0]);
                }
            }
        }
        setLoading(false);
    };

    React.useEffect(() => {
        fetchCompanyTree();
    }, []);

    return (
        <Spin spinning={loading}>
            <div className={styles.treeBox}>{renderTree()}</div>
        </Spin>
    );
};

export default DepartmentTree;
